<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>文章详情</title>
    <style>
    body {
        font-family: Arial, sans-serif; /* 设置全局字体 */
        line-height: 1.6; /* 设置行高 */
        color: #333; /* 设置文字颜色 */
        background-image: url(./img/927025.png);
        background-size: cover;
        background-position: center;
        margin: 0;
        padding: 0;
    }
    
    .container {
        max-width: 1000px; /* 设置容器最大宽度 */
        margin: 0 auto; /* 水平居中 */
        padding: 20px; /* 设置内边距 */
    }
    
    h1#title {
        text-align: center; /* 让标题居中 */
        font-size: 32px; /* 文章标题字体大小 */
        font-weight: bold; /* 文章标题加粗 */
        color: #333; /* 文章标题颜色 */
        margin-bottom: 20px; /* 设置标题与内容之间的距离 */
        cursor: url('../shubiao/pvscr1oll.cur'), auto; 
    }
    
    div#content {
        padding: 20px;
        text-indent: 30px;
        border-radius: 30px; /* 添加圆角 */
        background-color: #ccc; /* 设置背景颜色 */
        border: 2px solid #666; /* 添加边框线 */
        font-size: 18px; /* 文章内容字体大小 */
        line-height: 1.8; /* 设置行高 */
        overflow-y: auto; /* 添加垂直滚动条 */
        height: 800px; /* 设置固定高度 */
        cursor: url('../shubiao/pvscr1oll.cur'), auto; 
    }
    ::-webkit-scrollbar {
        width: 10px; /* 滚动条宽度 */
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0); /* 设置透明度 */
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        background-color: #888; /* 滑块颜色 */
        border-radius: 5px; /* 滑块圆角 */
    }

    /* 滚动条滑块在hover状态下的样式 */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* 滑块hover时的颜色 */
    }

    * {
        cursor: url('../shubiao/normal1.cur'), auto;
    }
</style>
</head>

<body>
    <div class="container">
        <h1 id="title">文章标题</h1>
        <div id="content">文章内容</div>
    </div>

    <script type="module">
        import { main } from "./js/article.js";
        main();
    </script>
</body>

</html>